<script setup lang='ts'>
import { ref } from 'vue';
import { regCode, reg } from "../api/api";
import { showNotify } from 'vant';
import { useRouter } from "vue-router";
import regpc from "./pc/regpc.vue";
const router = useRouter()
const username = ref('');
const password = ref('');
const ifdisabled = ref(false)
const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
const CodeText = ref<any>('发送验证码')
const sms = ref('')
//注册
const onSubmit = async (values: { mail: string, code: string, password: string }) => {
    const res = await reg({ mail: values.mail, code: values.code, password: values.password })
    if (res.data.code !== '200') return showNotify({ message: res.data.msg });
    showNotify({ type: 'success', message: res.data.msg });
    router.push({ name: 'login' })
};
//获取验证码
const sendCode = async () => {
    if (!regex.test(username.value)) return showNotify({ message: '邮箱格式错误' });
    const res = await regCode({ mail: username.value })
    if (res.data.code !== '200') return showNotify({ message: res.data.msg });
    showNotify({ type: 'success', message: res.data.msg });
    ifdisabled.value = true
    CodeText.value = 60
    const item = setInterval(() => {
        CodeText.value -= 1
        if (CodeText.value === 0) {
            clearInterval(item)
            CodeText.value = '发送验证码'
            ifdisabled.value = false
        }
    }, 1000);
}
</script>

<template>
    <div class="m">
        <van-nav-bar title="注册账号" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <!-- 邮箱 -->
                <van-field v-model="username" name="mail" label="邮箱" placeholder="请填写邮箱"
                    :rules="[{ required: true, message: '请填写邮箱' }]" />
                <!-- 验证码 -->
                <van-field v-model="sms" center clearable name="code" label="短信验证码" placeholder="请输入短信验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <van-button size="small" type="primary" style="width: 80px;" :disabled="ifdisabled"
                            @click="sendCode">{{ CodeText }}</van-button>
                    </template>
                </van-field>
                <!-- 密码 -->
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请填写密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <div class="login">
                    <span></span>
                    <RouterLink :to="{ name: 'login' }">登录账号</RouterLink>
                </div>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button block native-type="submit" type="primary">注册</van-button>
            </div>
        </van-form>
    </div>
    <div class="pc">
        <regpc></regpc>
    </div>
</template>

<style scoped>
.van-field {
    margin-top: 20px;
}

.login {
    display: flex;
    box-sizing: border-box;
    padding: 15px;
    font-size: 12px;
    justify-content: space-between;
}

a {
    color: black;
}
@media screen and (max-width:1024px) {
    .m {
        display: block;
    }

    .pc {
        display: none;
    }
}

@media screen and (min-width:1025px) {
    .m {
        display: none;
    }

    .pc {
        display: block;
    }
}
</style>